<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="800"
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="手机号" name="mobile">
                        <a-input v-model:value="formState.mobile" style="width: 200px" disabled placeholder="请输入商品名称" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="修改昵称" name="nickname">
                        <a-input v-model:value="formState.nickname" style="width: 200px" placeholder="" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="修改性别" name="sex">
                        <a-radio-group v-model:value="formState.sex">
                            <a-radio :value = 0>男</a-radio>
                            <a-radio :value = 1>女</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="修改头像" name="headPic">
                        <a-upload v-model:file-list="fileList"
                                  v-if="!imageUrl"
                                  name="avatar"
                                  :beforeUpload="beforeUploadPic"
                                  :customRequest="e => picUpload(e)"
                                  list-type="picture-card"
                                  :show-upload-list="false">
                            <div>
                                <a-image :width="150" :preview="false" :src="formState.img"></a-image>
<!--                                <img :src="formState.img" alt="">-->
                            </div>

                        </a-upload>

                        <a-image :width="150" v-if="imageUrl" :src="imageUrl"></a-image>
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed,watch} from "vue";
import {apiUploadImg, getImgUrl} from "../../../api";
import {message} from "ant-design-vue";

export default defineComponent({
    name: "ModalModifyInfo",
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "修改个人信息"
        }
    },
    setup(props, context) {
        const formData = ref()
        const loading = ref(false);
        const formState = computed(() => {
            return props.data
        })
        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const state = reactive({
            fileList: [],
            imageUrl: '',
        })


        // 自定义上传
        const picUpload = async (options) => {
            const params = new FormData()
            params.append('photo', options.file)
            const {data} = await apiUploadImg(params)
            if (data.code == 200) {
                formState.value.headPic =data.data
                const temp = {
                    filename: data.data
                }
                const imgData = await getImgUrl(temp)
                state.imageUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(imgData.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
            } else {
                message.error(data.msg)
            }
        }

        // 上传之前
        const beforeUploadPic = (file) => {
            return new Promise((resolve, reject) => {
                if (file.type && file.type.indexOf("image/") == -1) {
                    message.error("只能上传图片文件")
                    reject()
                } else {
                    resolve(file)
                }
            })
        }

        // 点击确定按钮

        const handleOk = () => {
            context.emit('close', 'edit')
        }

        // 点击取消按钮
        const cancelModal = () => {
            context.emit('close', 'cancel')
        }

        watch(show, (nv) => {
            if (nv) {
                console.log(111111)
                state.imageUrl = ''
            }
        })

        return {
            loading,
            ...toRefs(state),
            formData,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal,
            beforeUploadPic,
            picUpload
        }
    }
})
</script>

<style scoped>

</style>
